<template>
  <div class="todoapp">
    <TodoHeader :arr="showArr" @sendData="addTaskFn"></TodoHeader>
    <TodoMain :arr="showArr"></TodoMain>
    <TodoFooter :arr="showArr" @sendData="saveBtnType" @clearData="clearDataFn"></TodoFooter>
  </div>
</template>

<script>
// @ 表示src目录的别名
import TodoHeader from "@/components/TodoHeader"
import TodoMain from "@/components/TodoMain"
import TodoFooter from "@/components/TodoFooter"
export default {
  components: {
    TodoHeader,TodoMain,TodoFooter
  },
  data(){
    return {
      // list: [
      //   { id: 100, name: "吃饭", isDone: true },
      //   { id: 103, name: "睡觉", isDone: false },
      //   { id: 201, name: "打豆豆", isDone: true },
      // ],
      list: JSON.parse( localStorage.getItem("todo-list") )||[],
      curType: "all"
    }
  },
  watch:{
    list: {
      deep: true,
      handler(val){
        localStorage.setItem("todo-list", JSON.stringify(val))
      }
    }
  },
  methods: {
    // 新增任务
    addTaskFn(name){
      let id = this.list.length?this.list[this.list.length-1].id+1:100;
      this.list.push({
        id,
        name: name,
        isDone: false
      })
    },
    //保存用户点击的按钮标识符
    saveBtnType(type){
      this.curType = type;
    },
    // 清空已完成
    clearDataFn(){
      this.list = this.list.filter(item=>item.isDone===false)
    }
  },
  computed: {
    // 当显示的任务列表
    showArr(){
      if(this.curType == "yes"){

        return this.list.filter(item=>item.isDone)

      }else if(this.curType == "no"){

        return this.list.filter(item=>item.isDone===false)
      }else{
        return this.list
      }
    }
  }
}
</script>

<style>

</style>